<template>
  <div class="sub-two">
    <div class="goods-list">
        <div class="goods-item" v-for="item in dataList" :key="item.id" @click="gotoDetail(item)">
            <img :src="item.img" alt="">
            <div class="goods-title">{{item.title}}</div>
            <div class="goods-info">
                <div class="goods-price">￥{{item.price}}</div>
                <div class="goods-time">{{item.time}}课时</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            dataList:[{
                id:1,
                title:'科目二考试技巧科目二考试技巧科目二考试技巧科目二考试技巧',
                img:require('../../assets/keer.png'),
                price:'128.00',
                time:'4'
            }]
        }
    },
    methods:{
        gotoDetail(item){
            this.$router.push({
                path:'/SubTwoDetail',
                query:{
                    item
                }
            })
        }
    }
}
</script>

<style lang="scss">
    .goods-list{
        padding: 4.4vh 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .goods-item{
            width: 22%;
            box-shadow: 0px 3px 10px 0px rgba(153,153,153,0.1);
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            margin-bottom: 2vh;
            user-select: none;

            >img{
                width: 100%;
            }

            >div{
                padding: 2%;
            }

            .goods-title{
                color: #333333;
                font-size: 1.8vh;
            }

            .goods-info{
                display: flex;
                justify-content: space-between;

                .goods-price{
                    color: #FF6D6A;
                    font-size: 2vh;
                }

                .goods-time{
                    color: #999999;
                    font-size: 1.6vh;
                }
            }
        }
    }

</style>